<template>
	<view class="main">
		<tou_hand1 handtitle='设备异常统计详情'></tou_hand1>
		<view class="show">
			
			<view class="stwo">
				<view class="stwofirst">
					<view class="sfhandtap">
						<view class="sfhandone"><span class='sfhandonesun'>所属小区：</span>{{xqname}}</view>
						<view class="sfhandone"><span class='sfhandonesun'>所属充电区：</span>{{cdname}}</view>
						<view class="sfhandone"><span class='sfhandonesun'>设备号：</span>{{code}}</view>
					</view>
				</view>
				<view class="stwofirst" v-if="slist.length!=0">
					<view class="sfhand">
						<view class="sfhandone"><span class='sfhandonesun'>端口：</span>{{slistone.postsStr}}</view>
						<view class="sfhandtwo color" v-if="slistone.postsStatus==1" @click="qybtn(slistone.deviceId,slistone.posts)">启用端口</view>
						<view class="sfhandtwo color1" v-if="slistone.postsStatus==0" @click="jybtn(slistone.deviceId,slistone.posts)">禁用端口</view>
						<view class="sfhandtwo color2"  @click="zerobtn(slistone.code)">清零</view>
						<view class="sfhandtwo color3"  @click="ceshi(slistone.deviceId,slistone.postsStr,slistone.postsStatus)">测试</view>
					</view>
					<view class="sfleft" v-for="(item, index) in slist" :key="index">
						<view class="sfxia">
							<view class="sfxiathree">
								<view style="width: 200upx;">{{item.reportDt1}}</view>
								<view style="width: 200upx;">异常{{item.abnormalNum}}次</view>
								<view class='sfxiaone color2' v-if="item.abnormalNumStr==1||item.abnormalNumStr==0" @click="ycbrtn(item.code,item.reportDt,item.posts)">异常</view>
								<view class='sfxiaone color1' v-if="item.abnormalNumStr==2" @click="ycbrtn(item.code,item.reportDt,item.posts)">严重异常</view>
								<view class='sfxiaone color' v-if="item.abnormalNumStr==3" @click="ycbrtn(item.code,item.reportDt,item.posts)">极端异常</view>
							</view> 
						</view>
						
					</view>
				</view>
				<view class="stwofirst" v-if="blist.length!=0">
					<view class="sfhand">
						<view class="sfhandone"><span class='sfhandonesun'>端口：</span>{{blistone.postsStr}}</view>
						<view class="sfhandtwo color" v-if="blistone.postsStatus==1" @click="qybtn(blistone.deviceId,blistone.posts)">启用端口</view>
						<view class="sfhandtwo color1" v-if="blistone.postsStatus==0" @click="jybtn(blistone.deviceId,blistone.posts)">禁用端口</view>
						<view class="sfhandtwo color2"  @click="zerobtn(blistone.code)">清零</view>
						<view class="sfhandtwo color3"  @click="ceshi(blistone.deviceId,blistone.postsStr,blistone.postsStatus)">测试</view>
					</view>
					<view class="sfleft" v-for="(item, index) in blist" :key="index">
						<view class="sfxia">
							<view class="sfxiathree">
								<view style="width: 200upx;">{{item.reportDt1}}</view>
								<view style="width: 200upx;">异常{{item.abnormalNum}}次</view>
								<view class='sfxiaone color2' v-if="item.abnormalNumStr==1||item.abnormalNumStr==0" @click="ycbrtn(item.code,item.reportDt,item.posts)">异常</view>
								<view class='sfxiaone color1' v-if="item.abnormalNumStr==2" @click="ycbrtn(item.code,item.reportDt,item.posts)">严重异常</view>
								<view class='sfxiaone color' v-if="item.abnormalNumStr==3" @click="ycbrtn(item.code,item.reportDt,item.posts)">极端异常</view>
							</view> 
						</view>
						
					</view>
				</view>
				
				
			</view>
			
			
			

		</view>
		<van-popup :show="tishishow">
			<view class="tchuang">
				<view class="tcone" v-for="(item, index) in yclist" :key="index">
					<view class="tconeleft">{{item.typesStr}}</view>：
					<view class="tconeright">{{item.num}}</view>次
				</view>
				<view class="tcbtn" @click="closebtn">关闭</view> 
			</view>
		</van-popup> 
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	// import {
	// 	Dialog
	// } from 'vant';
	export default {
		components: {
			tou_hand1
		},
		mounted() {

		},

		data() {
			return {
				code:'',//设备号
				
				xqname:'',//所属小区
				cdname:'',//所属充电区
				tishishow:false,
				yclist:[],
				slist:[],
				blist:[],
				slistone:{},
				blistone:{}
			}
		},
		onLoad(option) {
			this.code=option.code
			this.xqname=option.projectName
			this.cdname=option.areaName
		},


		onShow() {
			this.listshow()

		},
		methods: {
			listshow(){
				this.blist=[]
				this.slist=[]
				let data = {
					code:this.code,
					pageNum:1,
					pageSize:120,
				}
				this.$base.request1('manager/statistic/deviceAbnormalPort/list', 'GET', data)
					.then(res => {
						var data=res.data.rows
						if(data.length>0){
							for(var i=0;i<data.length;i++){
								data[i].reportDt1=data[i].reportDt.substring(5)
								var posts=data[0].posts
								if(data[i].posts==posts){
									
									this.slist.push(data[i])
								}else{
									this.blist.push(data[i])
								}
							}
							if(this.slist.length!=0){
								this.slistone=this.slist[0]
							}
							if(this.blist.length!=0){
								this.blistone=this.blist[0]
							}
						}else{
							uni.navigateBack()
						}
						
					})
					.catch(err => {
				
					})
			},
			jybtn(deviceId,port){
				let data = {
					deviceId:deviceId,
					port:port,
					
				}
				Dialog.confirm({
					title: '提示',
					message: '确认禁用端口吗？'
				}).then(() => {
					uni.showLoading({
						title: '请稍候',
						mask: true
					})
					this.$base.request1('manager/equipment/banPort', 'POST', data)
						.then(res => {
							uni.hideLoading()
							if (res.data.code == 200) {
								this.slist=[]
								this.blist=[]
								this.listshow()
								this.$toast.success(res.data.msg)
							} else {
								this.$toast.fail(res.data.msg)
							}
						})
						.catch(err => {
					
						})
				}).catch(() => {
					// on cancel
				});
				
			},
			qybtn(deviceId,port){
				let data = {
					deviceId:deviceId,
					port:port,
					
				}
				Dialog.confirm({
					title: '提示',
					message: '确认启用端口吗？'
				}).then(() => {
					uni.showLoading({
						title: '请稍候',
						mask: true
					})
					this.$base.request1('manager/equipment/banPort', 'DELETE', data)
						.then(res => {
							uni.hideLoading()
							if (res.data.code == 200) {
								this.slist=[]
								this.blist=[]
								this.listshow()
								this.$toast.success(res.data.msg)
							} else {
								this.$toast.fail(res.data.msg)
							}
						})
						.catch(err => {
					
						})
				}).catch(() => {
					// on cancel
				});
				
			},
			//异常统计
			ycbrtn(code,reportDt,posts){
				console.log(code)
				console.log(reportDt)
				console.log(posts)
				let data = {
					code:code,
					posts:posts,
					reportDt:reportDt
				}
				
				this.$base.request1('manager/statistic/getAbnormalTypes', 'GET', data)
					.then(res => {
						if(res.data.code==200){
							this.yclist=res.data.data
							this.tishishow=true
						}else{
							this.$toast.fail(res.data.msg)
							return
						}
					})
					.catch(err => {
				
					})
			},
			closebtn(){
				this.tishishow=false
			},
			zerobtn(code){
				let data={
					code:code
				}
				Dialog.confirm({
					title: '提示',
					message: '确认清零吗？'
				}).then(() => {
					uni.showLoading({
						title: '请稍候',
						mask: true
					})
					this.$base.request1('manager/statistic/delAbnormalByCode', 'POST', data)
						.then(res => {
							uni.hideLoading()
							if(res.data.code==200){
								this.listshow()
								this.$toast.success('操作成功')
							}else{
								this.$toast.fail(res.data.msg)
								return
							}
						})
						.catch(err => {
					
						})
					
				}).catch(() => {
					// on cancel
				});
				
			},
			ceshi(deviceId,posts,postsStatus){
				let data={
					port:posts,
					deviceId:deviceId,
					control:'01'
				}
				Dialog.confirm({
					title: '提示',
					message: '确认测试吗？'
				}).then(() => {
					uni.showLoading({
						title: '请稍候',
						mask: true
					})
					this.$base.request('charge/testCharge', 'POST', data)
						.then(res => {
							uni.hideLoading()
							if(res.data.code==200){
								this.listshow()
								this.$toast.success(res.data.msg)
							}else{
								this.$toast.fail(res.data.msg)
								return
							}
						})
						.catch(err => {
					
						})
					
				}).catch(() => {
					// on cancel
				});
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {

		.show {
			width: 100%;
			padding-bottom: 80upx;


			.stwo {
				width: 100%;
				box-sizing: border-box;

				.stwofirst {
					width: 686upx;
					border-radius: 16upx;
					box-shadow: 4upx 8upx 14upx 2upx rgba(44, 44, 44, 0.21);
					margin: 15upx auto;
					padding: 29upx 24upx;
					box-sizing: border-box;
					.sfhand{
						display: flex;
						align-items: center;
						border-bottom: 1upx solid #c8c8cc;
						padding-bottom: 20upx;
						.sfhandone{
							color: #666666;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							width: 25%;
							.sfhandonesun{
								font-size: 30upx;
								font-weight: 700;
								color: #3b3b3b;
							}
						}
						.sfhandtwo{
							font-size: 24upx;
							width: 140upx;
							color: #FFFFFF;
							padding: 10upx 0;
							border-radius: 10upx;
							text-align: center;
							margin-left: 50upx;
						}
						.color{
							background-color: #ff0000;
						}
						.color1{
							background-color: #0066ff;
						}
						.color2{
							background-color: #555500;
						}
						.color3{
							background-color: #04BE02;
						}
					}
					.sfhandtap{
						.sfhandone{
							margin-bottom: 10upx;
							font-size: 26upx;
							color: #666666;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							.sfhandonesun{
								font-size: 28upx;
								font-weight: 700;
								color: #3b3b3b;
							}
						}
					}
					.sfleft {
						border-bottom: 1upx dashed #c8c8cc;
						margin: 15upx auto;
						padding: 10upx 15upx;
						.sfxia {
							display: flex;
							align-items: center;
							margin: 10upx 0;
							.sfxiatwo{
								font-size: 26upx;
								color: #181818;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 700;
							}
							.sfxiathree{
								display: flex;
								align-items: center;
								font-size: 24upx;
								color: #666666;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 500;
								justify-content: space-between;
								width: 100%;
								.sfxiaone{
									width: 120upx;
									font-size: 24upx;
									text-align: center;
									border-radius: 10upx;
									padding: 12upx 0;
									box-sizing: border-box;
									color: #FFFFFF;
								}
							}
							
							.color{
								background-color: #f44336;
							}
							.color1{
								background-color:#ff33ff ;
							}
							.color2{
								background-color:#ff9933 ;
							}
						}
					}
					
					
				}

			}

		}
		.tchuang{
			width: 500upx;
			height: 500upx;
			padding: 12upx 10upx;
			box-sizing: border-box;
			padding-top: 50upx;
			position: relative;
			.tcone{
				display: flex;
				text-align: center;
				align-items: center;
				color: #808080;
				justify-content: center;
				margin-top: 20upx;
				.tconeright{
					color: red;
				}
				
			}
			.tcbtn{
				width: 150upx;
				background-color:red ;
				color: #FFFFFF;
				text-align: center;
				padding: 15upx 0;
				border-radius: 15upx;
				position: absolute;
				margin: 0 auto;
				left: 0upx;
				right: 0upx;
				bottom: 20upx;
			}
		}
	}
</style>
